<template>
    <page-body>
        <view class="page">
            <!---flex布局flex布局开始-->
            <view class="benben-flex-layout">
                <view class='oneClickLogin_fd0_0_hidf'>
                    <image class='oneClickLogin_fd0_0_c0_hidf' mode="aspectFit" src='@/static/logo.png'></image>
                </view>
                <view class='oneClickLogin_fd1_0_hidf'>
                    <text class='oneClickLogin_fd1_0_c0_hidf'>雄安小管家</text>
                </view>
            </view>

            <!---flex布局flex布局结束-->

            <!---flex布局flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout oneClickLogin_flex_1_hidf">

                <view class='flex flex-wrap align-center oneClickLogin_fd1_1_hidf'>
                    <button class='oneClickLogin_fd1_1_c0_hidf' @tap.stop="LoginFunc"
                        v-if="login_type==1">快捷登录</button>
                    <button class='oneClickLogin_fd1_1_c0_hidf' open-type="getPhoneNumber"
                        @getphonenumber="decryptPhoneNumber" v-if="login_type==2">手机号快捷登录</button>
                </view>
            </view>

            <!---flex布局flex布局结束-->
            <view
                class="flex flex-direction flex-wrap align-center benben-position-layout flex oneClickLogin_flex_2_hidf">
                <view class='flex flex-wrap align-center justify-center oneClickLogin_fd2_0_hidf'>
                    <checkbox-group @change="changeCheck">
                        <label>
                            <checkbox value="checked" :checked="false" style="transform:scale(0.8)" />
                            <text class='oneClickLogin_fd2_0_c1_hidf'>已阅读并同意</text>
                        </label>
                    </checkbox-group>
                    <text class='oneClickLogin_fd2_0_c2_hidf' @tap.stop="handleJumpDiy" data-type="navigateTo"
                        :data-url="`/pages/dlzc/privacyPolicy/privacyPolicy?type=${1}`">《用户注册协议》</text>
                    <text class='oneClickLogin_fd2_0_c3_hidf'>与</text>
                    <text class='oneClickLogin_fd2_0_c2_hidf' @tap.stop="handleJumpDiy" data-type="navigateTo"
                        :data-url="`/pages/dlzc/privacyPolicy/privacyPolicy?type=${2}`">《隐私政策》</text>
                </view>

            </view>
            <view :style="{height: '88rpx'}"></view>
        </view>
    </page-body>
</template>
<script>
    import { wxLoginCode, wxLogin,postwxPhoneNumber } from '@/api/index.js'
    export default {
        components: {},
        data() {
            return {
                "id_tk": "",
                login_type: 1,
                is_tick: [],
                openid:''
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {

        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            changeCheck(n) {
                this.is_tick = n.detail.value
            },

            //登录
            LoginFunc() {
                let _this = this;
                if (_this.is_tick.length === 0) {
                    uni.showToast({
                        title: '请勾选同意用户与协议',
                        icon: 'none'
                    })
                    return false;
                }
                // 微信登录完整实现代码（待开发）
                wxLoginCode().then(code => {
                    wxLogin({
                        code
                    }).then(res => {
                        if (res.errno === 0) {
                             _this.login_type = 2;
                             _this.openid = res.res.openid
                            uni.showToast({
                                title: '请求成功',
                                icon: 'success'
                            }); 
                        } else {
                            uni.showToast({
                                title: res.message || '登录失败',
                                icon: 'none'
                            });
                        }
                    }).catch(err => {
                        uni.showToast({
                            title: '登录失败，请稍后再试',
                            icon: 'none'
                        });
                    });
                }).catch(err => {
                    uni.showToast({
                        title: '获取微信登录信息失败',
                        icon: 'none'
                    });
                });
            },

            //获取手机号码登录方法
            decryptPhoneNumber(e) {
                let _this = this;
                postwxPhoneNumber({
                	code: e.detail.code,
                    openid:this.openid
                }).then(res => {
                	if (res.errno === 0) {               		
                		// 保存用户信息到store
                		this.$store.dispatch('login', {
                		    token: res.data.token,
                		    user_info: res.data
                		});
                        uni.showToast({
                            title: '登录成功',
                            icon: 'success'
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/main?url=0'
                            })
                        }, 500);
                	} else {
                		// 发送失败，显示错误信息
                		uni.showToast({ 
                			title: res.msg || '发送失败', 
                			icon: 'none' 
                		});
                	}
                }).catch(err => {
                	// 接口调用异常处理
                	uni.showToast({ 
                		title: '网络异常，请稍后再试', 
                		icon: 'none' 
                	});
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        // background: url(image-path('5.png')) no-repeat;
        background-size: 100%;

        .oneClickLogin_flex_2_hidf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            bottom: calc(0rpx + var(--window-bottom));

            .oneClickLogin_fd2_0_hidf {
                width: 750rpx;
                margin: 12rpx 0rpx 0rpx 0rpx;

                .oneClickLogin_checkfd2_0_c0_c0_c0_hidf {
                    width: 24rpx;
                    height: 24rpx;
                    border-radius: 24rpx 24rpx 24rpx 24rpx;
                }

                .oneClickLogin_noCheckfd2_0_c0_c1_c0_hidf {
                    border-radius: 24rpx 24rpx 24rpx 24rpx;
                    width: 24rpx;
                    height: 24rpx;
                }

                .oneClickLogin_fd2_0_c1_hidf {
                    color: var(--benbenFontColor2);
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 33rpx;
                    margin: 0rpx 0rpx 0rpx 16rpx;
                }

                .oneClickLogin_fd2_0_c3_hidf {
                    color: var(--benbenFontColor2);
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 33rpx;
                }
            }
        }

        .oneClickLogin_fd2_0_c2_hidf {
            color: rgba(21, 75, 198, 1);
            font-size: 28rpx;
            font-weight: 400;
            line-height: 33rpx;
        }

        .oneClickLogin_flex_1_hidf {
            padding: 0rpx 56rpx 0rpx 56rpx;
            margin: 40rpx 0rpx 0rpx 0rpx;



            .oneClickLogin_fd1_1_hidf {
                margin: 270rpx 0rpx 0rpx 0rpx;

                .oneClickLogin_fd1_1_c0_hidf {
                    border-radius: 44rpx 44rpx 44rpx 44rpx;
                    width: 638rpx;
                    line-height: 88rpx;
                    font-size: 32rpx;
                    background: rgba(21, 75, 198, 1);
                    color: #FFFFFF;
                    height: 88rpx;
                    font-weight: 500;
                }
            }
        }

        .oneClickLogin_fd0_0_hidf {
            margin: 230rpx 0rpx 40rpx 0rpx;
            display: flex;
            justify-content: center;

            .oneClickLogin_fd0_0_c0_hidf {
                width: 180rpx;
                height: 180rpx;
                border-radius: 0rpx 0rpx 0rpx 0rpx;
            }
        }
    }

    .oneClickLogin_fd1_0_hidf {
        margin: 0rpx 0rpx 24rpx 0rpx;
        display: flex;
        justify-content: center;

        .oneClickLogin_fd1_0_c0_hidf {
            color: #333333;
            font-size: 32rpx;
            font-weight: 500;
        }
    }
</style>